<template>
<br>
  <div class="home">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">全部信息</a>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a
                class="nav-link active"
                aria-current="page"
                href="#"
                @click="FinBall()"
              >
              <router-link to='/ball'>
                已预约
              </router-link>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" @click="NoBall()">
                <router-link to='/ball'>
                未预约
              </router-link>
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
              ></a>
            </li>
          </ul>
          <!-- <form class="d-flex">
            <input
              class=""
              v-model="keyWord"
              type="text"
              placeholder="输入："
            />
            <span class="input-group-btn">
              <div class="" @click="searchBall()" type="button">
                &nbsp;&nbsp;
                <img
                  src="../../assets/搜索.png"
                  type="button"
                  width="45px"
                  height="45px"
                />
              </div>
            </span>
          </form> -->
<!-- 
          搜索框 -->
          <div class="input-container" @click="searchBall()">
            <input
              type="text"
              name="text"
              class="input"
              placeholder="search..."
              v-model="keyWord"
            />
            <span class="icon">
              <svg
                width="19px"
                height="19px"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g
                  id="SVGRepo_tracerCarrier"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></g>
                <g id="SVGRepo_iconCarrier">
                  <path
                    opacity="1"
                    d="M14 5H20"
                    stroke="#000"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    opacity="1"
                    d="M14 8H17"
                    stroke="#000"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2"
                    stroke="#000"
                    stroke-width="2.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    opacity="1"
                    d="M22 22L20 20"
                    stroke="#000"
                    stroke-width="3.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </g>
              </svg>
            </span>
          </div>
        </div>
      </div>
    </nav>
  
    <br />

    <!-- 表格 -->
    <table class="table table-dark table-striped">
      <thead>
        <tr>
          <th style="width: 100px">序号</th>
          <th style="width: 130px">球桌</th>
          <th style="width: 130px">球桌名</th>
          <th style="width: 150px">置购时间</th>
          <th style="width: 130px">状态</th>
          <th style="width: 130px">是否损坏</th>

          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ara in ball" :key="ara.id">
          <!-- //插值 插的是后端得到的属性，和数据库表里对应-->
          <td style="width: 60px">{{ ara.id }}</td>
          <td>
            <img
              :src="ara.image"
              alt="球桌图片"
              :style="{ width: '80px', height: '80px' }"
            />
          </td>
          <td>{{ ara.ballname }}</td>
          <td>{{ ara.buytime }}</td>
          <td>{{ ara.state }}</td>
          <td>{{ ara.broken }}</td>

          <td style="width: 200px">
            <!-- <button type="button" @click="addBall()" class="btn btn-success">
            增加
          </button> -->
            <button
              type="button"
              class="btn btn-success"
              @click="editBall(ara)"
            >
              编辑
            </button>
            <button
              type="button"
              class="btn btn-success"
              @click="deleteBall(ara.id)"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../../utils/http.js";

// 表格里的数据
export default {
  data() {
    return {
      ball: [],
      keyWord: "",
    };
  },
  created() {
    http
      .get("/getBallList")
      .then((res) => {
        if (res.data) {
          this.ball = res.data;
          console.log(res);
        }
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  },
  methods: {
    // 点击增加时候跳转
    addBall() {
      this.$router.push("/addBall");
    },

    searchBall() {
      // /搜索方法

      http.get("/getBallballname?ballname=" + this.keyWord).then((res) => {
        console.log(this.keyWord);
        this.ball = res.data;
      });
    },

    editBall(ara) {
      this.$router.push({
        path: "/updateBall",
        // 把参数带到编辑页面
        query: {
          //将数据格式化一下 JSON.stringify
          BallInfo: JSON.stringify(ara),
        },
      });
    },

    deleteBall(id) {
      //后端传id
      http.get("/deleteBall?id=" + id).then((res) => {
        // console.log(res)
        if (res.status === 200) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
        // 页面刷新
        this.$router.go(0);
      });
    },

    FinBall() {
   
        http.get("/getYesBallState?State=" + this.keyWord).then((res) => {
        console.log(this.keyWord);
        this.ball = res.data;
      });
    },
    NoBall() {
      
     
        http.get("/getNoBallState?State=" + this.keyWord).then((res) => {
        console.log(this.keyWord);
        this.ball = res.data;
      });
    },
  },
};
</script>

<style scoped>
.home {
  width: 80%;
  margin: 0 auto;
}

/* 搜索框样式 */
.input-container {
  width: 220px;
  position: relative;
  
}

.icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
}

.input {
  width: 100%;
  height: 40px;
  padding: 10px;
  transition: 0.2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}

.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}
</style>
